<template>
  <div>
    <div class="panel message-detail-panel">
      <div>
        <div class="message-detail-panel__title">
          {{ detailData.title || '/' }}
        </div>
        <div class="message-detail-panel__message_body">
          {{ detailData.content || '/' }}
        </div>
      </div>
      <div class="message-detail-panel__message_info">
        <div
          v-for="item in infoKey.filter((item) => !item.hidden)"
          :key="item.label"
        >
          <span class="message-detail-panel__message_info_label"
            >{{ item.label }}:</span
          >
          <span>{{ item.formatter(item) || '/' }}</span>
        </div>
      </div>
    </div>
    <div class="panel-btn-wrapper">
      <el-button
        type="primary"
        @click="handleClick"
        v-if="
          resourceSet.includes(
            '/web/message-management/hycMessage-management/hycMessageDetail-management/返回'
          )
        "
        >返回</el-button
      >
      <el-button
        type="warning"
        @click="handleDel"
        v-if="
          resourceSet.includes(
            '/web/message-management/hycMessage-management/hycMessageDetail-management/删除'
          )
        "
      >
        删除
      </el-button>
    </div>
  </div>
</template>
<script>
import { hycMessageList, delHycMessage } from '@/api/message'
import { typeMap } from '@/utils/format'
import dayjs from 'dayjs'
export default {
  name: 'messageDetail',
  props: {},
  data() {
    return {
      infoKey: [],
      detailData: {},
      detailAttrLabel: {
        targetUser: '发布对象',
        toCooperate: '是否发送合作方号',
        createTime: '合作时间',
      },
    }
  },
  methods: {
    handleClick() {
      this.$router.push('/message/hycMessageList')
    },
    handleDel() {
      this.$confirm('您确定要删除该消息吗？', '删除消息', {
        center: true,
      }).then(() => {
        if (this.$route.params.id)
          delHycMessage({ id: this.$route.params.id }).then(() => {
            this.$message({
              type: 'success',
              showClose: true,
              message: '操作成功',
            })

            this.$router.push('/message/hycMessageList')
          })
      })
    },
  },
  computed: {
    resourceSet() {
      return this.$store.getters.resourceSet
    },
  },
  mounted() {
    if (this.$route.params.id) {
      hycMessageList({
        id: this.$route.params.id,
      }).then((res) => {
        this.detailData = res.list[0] || {}
        this.infoKey = [
          {
            label: '发布对象',
            formatter: () => {
              return typeMap.targetUserType[this.detailData.targetUser]
            },
          },
          {
            label: '区域',
            formatter: () => {
              if (this.detailData.cityName && this.detailData.provinceName) {
                return this.detailData.cityName + this.detailData.provinceName
              }
              return '全部'
            },
            hidden: !this.detailData.targetUser == 2,
          },
          {
            label: '是否发送合作方号',
            formatter: () => {
              return this.detailData.toCooperate ? '是' : '否'
            },
            hidden: !this.detailData.targetUser == 2,
          },
          {
            label: '发布时间',
            formatter: () => {
              if (this.detailData.createTime) {
                return dayjs(this.detailData.createTime).format(
                  'YYYY-MM-DD HH:mm:ss'
                )
              }
              return '--'
            },
          },
          {
            label: '撤回时间',
            formatter: () => {
              if (this.detailData.recallTime) {
                return dayjs(this.detailData.recallTime).format(
                  'YYYY-MM-DD HH:mm:ss'
                )
              }
              return '--'
            },
            hidden: !this.detailData.recallTime,
          },
        ]
      })
    }
  },
}
</script>
<style lang="scss" scoped>
.message-detail-panel {
  padding: 40px;
  font-size: 14px;

  .message-detail-panel__title {
    font-size: 16px;
    font-weight: bold;
    color: #272727;
    padding-bottom: 34px;
  }

  .message-detail-panel__message_body {
    padding-bottom: 20px;
    border-bottom: 1px solid #e8e8e8;
  }

  .message-detail-panel__message_info {
    display: flex;
    flex-wrap: wrap;

    div {
      width: 25%;
      min-width: 200px;

      flex: 0 0 auto;
    }

    .message-detail-panel__message_info_label {
      font-weight: bold;
      color: #272727;
      padding-right: 10px;
    }
  }
}
</style>
